<template>
  <div id="app">
      <div class="header">
         <span @click="componentsName='move'">电影</span>
         <span @click="componentsName='book'">图书</span>
         <span @click="componentsName='radio'">广播</span>
         <span @click="componentsName='team'">小组</span>
      </div>
      <keep-alive include="radio">
         <component :is="componentsName"></component>
      </keep-alive>
  </div>
</template>

<script>
import move from '@/components/move';
import book from '@/components/book';
import radio from '@/components/radio';
import team from '@/components/team';

export default { 
  name: 'App',
  components: {
   move,
   book,
   radio,
   team
  },
  data(){
    return {
      componentsName:"move"
    }
  }
}
</script>

<style>
*{
  margin:0;
  padding:0;
  list-style:none;
}
body,html,#app{
  width:100%;
  height:100%;
  overflow:hidden;
}
#app{
  display:flex;
  flex-direction:column;
}

.header{
  width:100%;
  height:40px;
  line-height:40px;
  display:flex;
  justify-content:space-around;
}
</style>
